<template>
  <div id="app">
    <div id="header">
      <div class="header_inside">
        <div class="logo"><img src="assets/logo.png" /></div>
        <div class="header_right">
          <span class="head_btn">用户反馈 <i class="el-icon-chat-dot-square"></i></span>
          <span class="head_user">{{ userInfo.nickname }}</span>
          <span class="head_login_before" v-show="uid == 0">登录/注册</span>

          <el-dropdown trigger="click" v-show="uid != 0" @command="handleCommand">
            <span class="head_login_after">
              <!-- <img :src="userInfo.headimgurl" /> -->
            </span>
            <el-dropdown-menu slot="dropdown" class="head_login_menu">
              <!-- <el-dropdown-item>升级续费</el-dropdown-item> -->
              <el-dropdown-item command="userCenter"> <img src="assets/imgs/person.svg" />个人中心 </el-dropdown-item>
              <el-dropdown-item command="logout"><i class="stockWriting sw_ico_logout"></i>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div id="content">
      <div class="sider">
        <div class="contact_us">
          <h3>联系我们</h3>
          <p>QQ群 556658445</p>
        </div>
      </div>

      <div class="main_content">
        <div class="section_box">
          <div class="sb_title">网站公告</div>
          <div class="sb_cont">
            <p>每天在用户中心签到可获得免费提取次数，如果需要帮助，可加入客服QQ群号：787899423</p>
            <p>
              单个视频提取支持的平台：抖音、火山、今日头条、西瓜视频、TikTok、Youtube、Facebook、Instagram、Twitter、小红书、bilibili哔哩哔哩B站、AcFun、QQ看点、淘宝、天猫、闲鱼、京东、拼多多、考拉海购、UC视频、趣头条、皮皮虾、微博、秒拍、绿洲、小咖秀、微视、美图秀秀、美拍、网易云音乐、陌陌、映客、迅雷、阳光宽频、全民K歌、刷宝、WIDE短视频
              、轻视频、最右、开眼、酷燃、剪映、糗事百科、好看视频、Tumblr、梨视频、**等
            </p>
          </div>
        </div>

        <el-tabs v-model="activeName" type="card" @tab-click="handleTab">
          <el-tab-pane label="单个视频提取" name="first">单个视频提取</el-tab-pane>
          <el-tab-pane label="批量视频提取" name="second">批量视频提取</el-tab-pane>
        </el-tabs>

        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      activeName: "first",
    };
  },
  computed: {
    uid() {
      return this.$store.state.uid; //默认用户唯一id为--
    },
    userInfo() {
      return this.$store.state.userInfo; //用户信息
    },
  },
  methods: {
    logout() {
      this.statReport({ uid: this.uid, event: "退出登录" });
      localStorage.removeItem("user");
      localStorage.removeItem("tokenSetDate");
      this.$store.commit("SET_UID", "");
      this.$store.commit("SET_USERINFO", { nickname: "", headimgurl: "" });
      // this.checkLocalStorageLogin();
      location.reload();
    },

    //用户菜单
    async handleCommand(command) {
      if (command == "logout") {
        this.logout();
      } else if (command == "userCenter") {
        this.jumpUserCenter();
      }
    },

    handleTab(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less">
@import "assets/css/App.less"; /*App*/
</style>
